<template>
  <div v-show="paralyse" :paralyse="paralyse">
    <h2 @click="paraly">关闭</h2>
    <input type="text" v-model="msg" />
    <span>{{ msg }}</span>
    <hr />
    <!-- 原生DOM当中是有oninput事件,它经常结合表单元素一起使用,当表单元素文本内容发生变化的时候就会发出一次回调
    Vue2:可以通过value和input事件实现v-model功能 -->
    <h2>v-model实现原理--vue2</h2>
    <input type="text" :value="msg" @input="msg = $event.target.value" />
    <span>{{ msg }}</span>
    <!--实现父子组件通信 :value是props.父子组件之间实现通信-->
    <Customlnput :value="msg" @input="msg = $event" />
  </div>
</template>

<script>
import Customlnput from "./CustomInput/index.vue";
export default {
  name: "ModelTest",
  props: {
    paralyse: { type: Boolean, default: false },
  },
  data() {
    return {
      msg: "大漠孤烟直,长河落日圆",
    };
  },
  components: { Customlnput },
  methods: {
    paraly() {
      this.$emit("xxx");
    },
  },
};
</script>

<style>
</style>